import React, { PureComponent } from "react"

export default class Optimize extends PureComponent {
  /*
    只要父组件执行setState（）,即使不改变状态数据，组件也会重新render（）=====》 效率低
    只要父组件执行setState（）,即使子组件不使用父组件任何数据，组件也会重新render（）=====》 效率低

    做法：只有数据发生改变是才重新render（）

    原因：Component 中的shouldComponentUpdate()总是返回true

    解决：1，重写中的shouldComponentUpdate（）方法
        比较数据，有变化返回true 无变化返回false
       2. 不使用 Component 使用 PureComponent
        使用 PureComponent 内部重写了 shouldComponentUpdate
        只是进行state 和props数据的浅比较 如果只是数据对象内部的数据变了返回false
        不要直接修改state数据 而是要产生新数据
        项目中一般使用 PureComponent 优化

  */
  state = {
    name: "123",
  }
  //   shouldComponentUpdate(nextProps, nextState) {
  //     console.log(nextProps, nextState)
  //     console.log(this.props, this.state)
  //     return !(this.state.name === nextState.name)
  //   }
  
  changes = () => {
    this.setState({ name: "qwe" })
  }
  render() {
    console.log("render")
    return <div onClick={this.changes}>Optimize---{this.state.name}</div>
  }
}
